function CreateList() {
    //列表的整体div
    let listDOM = [];
    let active = -1;

    this.show = (conf) => {
        let cfg = {
            width: '170px',
            height: '125px',
            list: fontFamily,
            title: '字体(F):',
            selected: 'Bahnschrift',
            container: 'body',
            selectHandler: null,
        }

        let $DOM = $(`<div class="main-list"></div>`);

        // 更新结构
        $.extend(cfg, conf)
        $(cfg.container).append($DOM);

        // 得到选中的项的下标
        for (let i = 0; i < cfg.list.length; i++) {
            if (cfg.list[i] == cfg.selected) {
                active = i;
            }
        }

        //标题渲染
        let $title = $(`<div class="list-title">${cfg.title}</div>`)
        $title.css({
            width: cfg.width,
        })
        $DOM.append($title);

        // 字体框渲染
        let $input = $(`<input type="text" value="${cfg.selected}" class="fonttext" />`);
        $input.css({
            width: cfg.width
        })
        $input.select();
        $DOM.append($input)

        // 字体选择区的渲染
        let $lists = $(`<ul class="change-area"></ul`);
        $lists.css({
            width: cfg.width,
            height: cfg.height
        })

        for (let i = 0; i < cfg.list.length; i++) {

            let $list = $(`<li class="list" id="${i}">${cfg.list[i]}</li>`);

            // 改变每一项的字体大小
            $list.css({
                fontFamily: cfg.list[i], 
            })

            listDOM.push($list);

            if (cfg.list[i] == cfg.selected) {
                $list.css({
                    backgroundColor: '#0078D7',
                    color: '#fff'
                })

                active = i;
            }

            $lists.append($list);

            $list.click((e) => {
                let a = e.target.id;

                // 将之前选中的样式改变
                listDOM[active].css({
                    backgroundColor: '#fff',
                    color: '#000'
                })

                // 改变选中li的样式
                $list.css({
                    backgroundColor: '#0078D7',
                    color: '#fff'
                })

                // 随着字体的选中，改变input框中的内容，并改成全选样式
                $input.attr('value', e.target.innerHTML)
                $input.select();

                // 改变选择的下标
                active = a;

                cfg.selectHandler(e);
            })
        }

        // 滚动到选中所在位置
        let mainContainer = $lists;
        mainContainer.animate({
            scrollTop: active * 14 //14是每个li的高度
        }, 1);

        // 渲染列表
        $DOM.append($lists);

    }

    return this.inpval;
}